import React, { useState } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import { router } from 'expo-router';
import Ionicons from '@expo/vector-icons/Ionicons';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import Attention from '../homeTag/attention'
import Found from '../homeTag/found'
import Near from '../homeTag/near'
export default function HomeScreen() {
  const [headerTag] = useState<string[]>(['关注', '发现', '附近']);
  const [headerTagIndex, setHeaderTagIndex] = useState<number>(1);

  // 根据不同的 标题 渲染不同的内容
  const renderContent = () => {
    switch (headerTagIndex) {
      case 0:
        return <Attention></Attention>;
      case 1:
        return <Found></Found>;
      case 2:
        return <Near></Near>;
      default:
        return null;
    }
  };
  // 前往搜索页面
  const goSearch = () => {
    router.navigate('/search')
  }
  return (
    <View style={styles.container}>
      <ThemedView style={styles.headerTag}>
        <Ionicons name="menu" size={26} color="#000000" />
        {headerTag.map((item, index) => (
          <ThemedText
            key={index}
            onPress={() => setHeaderTagIndex(index)}
            style={[styles.headerTagText, headerTagIndex === index ? styles.headerTagColor : null]}
          >
            {item}
          </ThemedText>
        ))}
        <Ionicons name="search" size={26} color="#000000" onPress={() => goSearch()} />
      </ThemedView>
      <View style={styles.contentContainer}>
        {renderContent()}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerTag: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 35,
    paddingHorizontal: 10, // Optional: Add padding for better spacing
    backgroundColor: '#f8f8f8', // Optional: Add background color for header
    borderBottomWidth: 1,
    borderBottomColor: '#DCDCDC',
  },
  headerTagText: {
    fontSize: 16,
    color: '#000',
  },
  headerTagColor: {
    color: '#DC143C',
    transform: [{ scale: 1.1 }], // Fixed: transform should be an array of objects
    borderBottomColor: '#DC143C',
    borderBottomWidth: 2,
  },
  contentContainer: {

  }
});
